<template>
    <div>
        <!-- 轮播图 -->
        <mt-swipe :auto="4000">
            <!-- 组件定义 谁用到它 就可以 传递相应的东西-->
            <mt-swipe-item v-for="item in lunbotulist" :key="item.id">
                <img :src="item.img" :alt="item.url" :class="{full:isFull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>
    <!--图片的宽度和高度如何自适应 因为商品详情界面里面的轮播图 被拉伸了
    所以可以使用 传递参数 的方法 将高度是否100%自行判定选择
    -->
</template>
<script>
export default {
    props:["lunbotulist","isFull"]
}
</script>
<style lang="scss" scoped>
.mint-swipe{
    height:200px;
    .mint-swipe-item{
        text-align: center;
        // &:nth-child(1){
        //     background-color: lightblue
        // }
        // &:nth-child(2){
        //     background-color: lightgreen
        // }
        // &:nth-child(3){
        //     background-color: lightpink
        // }

        img{
            height: 100%;
        }
        .full{
            width: 100%;
        }

        .mui-media-body{
            font-size: 13px;
        }
    }
}
</style>